<template>
  <div class="tabs-Container">
    <!-- tab栏切换 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first"></el-tab-pane>
      <el-tab-pane label="待审核" name="0"></el-tab-pane>
      <el-tab-pane label="已经审核" name="1"></el-tab-pane>
      <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
    </el-tabs>
    <!-- 消息提示框 -->
    <el-alert :closable="false" type="info" left show-icon class="alertInfo">数据一共{{ count }}条 </el-alert>
    <!-- 表格区域 -->
    <el-table :data="newTableDa" style="width: 100%" class="testData">
      <el-table-column prop="number" label="试题编号" width="120" align="center"> </el-table-column>
      <el-table-column prop="subject" label="学科" width="60" align="center"> </el-table-column>
      <el-table-column prop="catalog" label="目录" width="80" align="center"> </el-table-column>
      <el-table-column prop="questionType" label="题型" width="60" align="center"> </el-table-column>
      <el-table-column label="题干" width="200" align="center">
        <template v-slot="question">
          <div v-html="question.row.question"></div>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="200" align="center">
        <template v-slot="scope">
              {{$moment(scope.row.addDate).format("YYYY-MM-DD HH:mm:ss")}}
            </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="60" align="center"> </el-table-column>
      <el-table-column prop="creator" label="录入人" width="100" align="center"> </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="80" align="center"> </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="150" align="center"> </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120" align="center"> </el-table-column>
      <el-table-column prop="chkState" label="发布状态" width="80" align="center"> </el-table-column>
      <el-table-column prop="date" label="操作" width="200" fixed="right" align="center">
        <template v-slot="testBaseData">
          <!-- 预览组件 -->
          <preview :testBaseData="testBaseData.row"></preview>
        </template>
      </el-table-column>
      <template v-slot:append></template>
    </el-table>
    <!-- 分页栏 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :page-sizes="[2, 5, 10, 50]"
      layout="prev,pager,next,sizes,jumper"
      :total="count"
      :background="true"
    >
    </el-pagination>
  </div>
</template>

<script>
// 引入传值文件
import bus from './brotherByValue'
// 引入获取数据接口
import { TestbaseList } from '../../../api/components/component'  
// 引入预览组件
import preview from './tabs-nav/preview'

export default {
  name: 'tabsnav',
  components: {
    preview
  },
  data() {
    return {
      // tab栏切，模式是第一个
      activeName: 'first',
      // 接受的表格数据
      tableData: [],
      // 消息弹出框数量
      count: null,
      // 符合条件的表格数据
      newTableDa: [],
      // 当前页码
      currentPage: null,
      // 每页显示的大小
      pageSize: 10,
      // 控制子组件状态
      dialogVisible: false
    }
  },
  methods: {
    // 每页的大小
    async handleSizeChange(val) {
      // 拿到当前页数组的时候赋值
      this.pageSize = val
      const { data } = await TestbaseList({
        pagesize: val
      })
      this.tableData = data.items
      this.handleClick()
    },
    // 切换页码
    async handleCurrentChange(val) {
      console.log(this.pageSize)
      const { data } = await TestbaseList({
        page: val,
        pagesize: this.pageSize
      })
      this.tableData = data.items
      this.handleClick()
    },
    // 点击预览
    preview() {
      this.dialogVisible = true
    },
    // 筛选表格数据,拿取与tab栏的name相同的数据
    // 并把数据赋值给对应的表格
    handleClick() {
      this.newTableDa = this.tableData.filter(item => {
        if (this.activeName === 'first') {
          return item
        } else {
          return item.chkState === this.activeName * 1
        }
      })
      this.count = this.newTableDa.length
    }
  },
  mounted() {
    // 接受兄弟组件的表单数据传值
    bus.$on('onformData', data => {
      // 给消息框赋值
      this.count = data.counts
      this.tableData = data.items
      this.newTableDa = data.items
    })
    // 接受搜索结果返回来的数据
    bus.$on('serchData', data => {
      // 拿到搜索结果后重新赋值,并把tab栏重新切换回默认
      this.count = data.counts
      this.tableData = data.items
      this.newTableDa = data.items
      this.activeName = 'first'
    })
    // 监听删除的事件
    bus.$on('del', statu => {
      this.handleClick()
    })
    // 上架
    bus.$on('putaway', statu => {
      console.log('上架')
    })
  },
  created() {
    this.handleClick()
  }
}
</script>

<style lang="less" scoped>
.tabs-Container {
  .el-pagination {
    float: right;
    margin-top: 20px;
  }
  margin-top: 10px;
  height: 700px;
  .testData {
    .fontBig {
      font-size: 11px;
      margin-right: 5px;
      text-align: center;
    }
  }
  .alertInfo {
    height: 25px;
    font-size: 5px;
  }
}
</style>
